<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>个人网站</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/global.css" type="text/css">
    <link rel="stylesheet" href="css/page6.css">
    <!--[if lt IE 9]>
    <script src="./js/html5shiv.js"></script>
    <script src="./js/respond.js"></script>
    <![endif]-->
    <style>
        #app{
            background: #fff;
        }
    </style>
</head>
<body>
<!--头部导航-->
<nav class="navbar navbar-inverse my-top-navbar navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-header ">
                <a href="index.html" class="navbar-brand">王维军的个人网站</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target="#my-con">
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                </button>
            </div>
            <div id="my-con" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">bootstrap</a></li>
                    <li><a href="page2.html">html5+css3</a></li>
                    <li><a href="page3.html">js实例</a></li>
                    <li><a href="page4.html">jQuery特效</a></li>
                    <li><a href="page5.html">angularJS</a></li>
                    <li class="my-active"><a href="vue.html">vue+echarts</a></li>
                    <li><a href="page6.html">PHP+mysql</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!--内容开始-->
<div class="container" id='app'>
    <div class="row">
        <!-- {{name}} -->
        <div id="chart11" style="width: 750px; height: 400px;margin: 20px auto;"></div>
    </div>
</div>
<!--内容结束-->
<!--尾部分页-->
<div class="container">
    <div class="row">
        <!--分页-->
        <ul class="pagination pull-right hidden-xs">
            <li><a href="index.html">首页</a></li>
            <li><a href="#"><<</a></li>
            <li><a href="index.html">1</a></li>
            <li><a href="page2.html">2</a></li>
            <li><a href="page3.html">3</a></li>
            <li><a href="page4.html">4</a></li>
            <li><a href="page5.html">5</a></li>
            <li><a href="page6.html">6</a></li>
            <li><a href="page6.html">>></a></li>
            <li><a href="page6.html">尾页</a></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/vuepage.js"></script>
<script>
    var dom = document.getElementById("chart11");
var myChart = echarts.init(dom);
var app = {};
app.title = '折柱混合';
option = {

    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['出生率‰','死亡率‰','增长率‰']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['1955','1960','1965','1970','1975','1980','1985','1990','1995','2000','2005','2010','2015']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'出生率‰',
            type:'line',
            data:[32.6,20.86,37.88,33.43,23.01,17.82,18.21,17.8,21.06,17.12,14.03,12.4,11.9,12.07]
        },
        {
            name:'死亡率‰',
            type:'line',
            data:[12.28,25.43,9.5,7.6,7.32,6.21,6.34,6.57,6.67,6.57,6.45,6.51,7.11,7.11]
        },
        {
            name:'增长率‰',
            type:'line',
            data:[20.32,-4.57,28.38,25.83,15.69,11.61,11.87,11.23,14.39,10.55,7.58,5.89,4.79,4.96]
        }
    ]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>